<template>
	<view class="customer">
		<view class="list marginT backF">
			<view class="fl iconBox">
				<icon-svg icon-class="dingdan" />
			</view>
			<view class="fl listRi">
				<view class="title">随手记费用</view>
				<text class="subTitle">NOTES</text>
			</view>
		</view>
		<view class="billForm">
			<view class="billFormList uni-common-mt">
				<view v-for="(item, index) in formList" :key="index"
				  class="uni-form-item uni-column">
					<view class="title">
						<text v-if="item.isRquire" class="star">*&nbsp;</text>
						{{item.title}}：
					</view>
					<input class="uni-input" :placeholder="item.placeholder" />
				</view>
			</view>
			<view class="addBilltitle">添加发票</view>
		</view>
		<view class="cusomerCause">
			<view class="uni-form-item uni-column">
				<view class="title">消费是由:</view>
				<textarea class="cusomerCauseText"
					placeholder-style="color:#cccccc" 
					placeholder="选择简单消费是由:"/>
			</view>
		</view>
		<view class="enclosure">
			<view class="uni-form-item uni-column">
				<view class="title">附件:</view>
				<input class="uni-input" placeholder="(选填)" />
			</view>
		</view>
		<view class="btmBarNav">
			<view class="btmNavLeft fl">
				<icon-svg icon-class="tianjia" />
				<text class="text">再记一笔</text>
			</view>
			<view class="btmNavRight fl">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formList: [
					{
						title: '金额',
						isRquire: true,
						inputType: 'text',
						placeholder: '请输入金额',
					},
					{
						title: '日期',
						isRquire: false,
						inputType: 'date',
						placeholder: '2020-12-30',
					},
					{
						title: '发票',
						isRquire: false,
						inputType: 'text',
						placeholder: '无需填写',
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/pages/add/add.scss';
	.customer{
		.list{
			.iconBox{
				margin-top: 12px;
				@include iconBox(80rpx, 80rpx, $themeColor, #ffffff, 24px)
			}
			@include div(100%, 120rpx);
			.listRi{
				padding-left: 16px;
				@include divH(60rpx);
			}
			.title{
				font-size: 18px;
				font-weight: bold;
				@include divH(60rpx);
			}
			.subTitle{
				color: #999;
				@include divH(60rpx);
			}
		}
		.billForm{
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			.billFormList{
				margin-top: $marginT1;
				.uni-form-item{
					border-bottom: 1px solid #F1F1F1;
					padding: 10px 15px 15px;
					line-height: 80rpx;
				}
				.star{
					color: red;
				}
			}
		}
		.cusomerCause{
			margin-top: 12px;
			padding: 0 12px;
			background-color: #fff;
			.title{
				@include divH(90rpx);
			}
			.cusomerCauseText{
				width: 100%;
				height: 180rpx;
			}
		}
		.enclosure{
			margin-top: 12px;
			padding: 0 12px;
			background-color: #fff;
			margin-bottom: 80px;
			.title{
				@include divH(90rpx);
			}
			.uni-input{
				@include divH(90rpx);
			}
		}
		.addBilltitle{
			@include initDiv(100%, 90rpx);
			font-size: 18px;
			text-align: center;
			color: $themeColor;
			font-weight: bold;
		}
		.btmBarNav{
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 15px;
			background-color: #FFFFFF;
			@include divH(100rpx);
			.btmNavLeft{
				width: 70%;
				color: $themeColor;
				.text{
					padding-left: 8px;
				}
			}
			.btmNavRight{
				width: 30%;
				height: 100%;
				background-color: $themeColor;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
